﻿<div class="content sites" data-navtitle="Site List" data-viewsetup="setupDashboard">
    
    <div class="titlearea">
        Dashboard is <span class="label" id="dashboardstatus" onclick="toggleSuspendDashboard()">Loading...</span>
    </div>
    <div class="buttonarea">
        <button class="btn btn-success top-right-button" onclick="showDialog($('#addSiteDialog'), function () { $('#newSiteName').focus(); });"><i class="icon-plus-sign icon-white"></i> Add new site</button>
    </div>
    <div class="tablecontainer">
        <table class="sitedashboard table table-striped table-bordered">
            <thead>
                <tr id="dashboardDeploymentHeader"><th id="headSpacer" colspan="2"></th></tr>
                <tr id="dashboardHeader">
                    <th></th>
                    <th><i class="icon-file"></i> Application</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<div class="content sitedetails" data-navtitle="Site Details">

    <script type="text/javascript">
        var selectedSiteId = null;
        var hasUnsavedChanges = false;
        var selectedBindingIndex = null;

        function makeBindingChanges() {
            if (hasUnsavedChanges) return;
            hasUnsavedChanges = true;
            $("#savebindingsbutton").prop("disabled", false);
            $("#savebindingsbutton").removeClass("disabled");
        }

        function changeTab(tabIndex) {
            if (hasUnsavedChanges) {
                if (!confirm("You forgot to save, mate! Continue?")) return;
                hasUnsavedChanges = false;
            }
            var tabTitles = $(".sitedetails .verttabspace ul");
            var selTabTitle = tabTitles.children("li:nth-child(" + tabIndex + ")");
            tabTitles.children(".active").removeClass("active");
            selTabTitle.addClass("active");

            $(".sitedetails .verttabcontent .tab").hide(); 
            $(".sitedetails .verttabcontent .tab:nth-child(" + tabIndex + ")").show();

            if ($(".sitedetails .verttabcontent .tab:nth-child(2)").is(":visible")) {
                refreshSiteBindings();
            }
        }

        function saveSiteBindings() {
            $("#bindingsLoader").show();

            
            var rows = $(".sitedetails .bindingstable tbody tr");
            var bindingsData = [];
            for (var i = 0; i < rows.length; i++) {
                bindingsData.push({
                    Host: $(rows[i]).children("td:nth-child(1)").attr("data-val"),
                    Port: $(rows[i]).children("td:nth-child(2)").attr("data-val"),
                    Certificate: $(rows[i]).children("td:nth-child(3)").attr("data-val")
                });
            }

            var postData = {
                siteId: selectedSiteId,
                bindings: bindingsData,
                applyToInstances: $("#autoApplyBindingChangesCheckbox").is(":checked")
            };

            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(postData),
                url: 'Services/InstanceControl.svc/SaveSiteBindings'
            })
            .fail(function (xhr, status, error) {
                stopError("Can't save site bindings!");
            })
            .done(function (data, status, xhr) {
                if (!data.d) return;
                if (data.d.Error != null) stopError(data.d.Error);

                refreshSiteBindings();
            });

            $("#savebindingsbutton").prop("disabled", true);
            $("#savebindingsbutton").addClass("disabled");
            hasUnsavedChanges = false;
        }
        function refreshSiteBindings() {
            $(".sitedetails .bindingstable tbody").empty();
            $("#bindingsLoader").show();
            var postData = {
                siteId : selectedSiteId
            };

            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(postData),
                url: 'Services/InstanceControl.svc/GetSiteBindings'
            })
            .fail(function (xhr, status, error) {
                stopError("Can't get site bindings!");
            })
            .done(function (data, status, xhr) {
                if (!data.d) return;
                if (data.d.Error != null) stopError(data.d.Error);

                var tbody = $(".sitedetails .bindingstable tbody");
                tbody.empty();

                $("#savebindingsbutton").prop("disabled", true);
                $("#savebindingsbutton").addClass("disabled");
                hasUnsavedChanges = false;

                for (var i = 0; i < data.d.Bindings.length; i++) {

                    var dataCert = data.d.Bindings[i].Cert;
                    if (dataCert == null) dataCert = "";
                    var htmlCert = displayCert(dataCert);
                    

                    var host = data.d.Bindings[i].Host;
                    if (host == null || host == "") host = "Any";

                    var row = $("\
                        <tr data-bindingindex='" + i + "' onclick='openBindingsDialog(" + i + ");'>\
                            <td data-val='" + data.d.Bindings[i].Host + "'>" + host + "</td>\
                            <td data-val='" + data.d.Bindings[i].Port + "'>" + data.d.Bindings[i].Port + "</td>\
                            <td data-val='" + dataCert + "'>" + htmlCert + "</td>\
                        </tr>");

                    tbody.append(row);
                    row.hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });
                }
                $("#bindingsLoader").fadeOut();
            });
        }

        function displayCert(cert) {
            if (cert == null || cert == "") return "";
            else return "<i class='icon-lock icon-green'></i> " + cert;
        }
        function deleteSiteBinding(bindingIndex) {
            var bindingRow = $("tr[data-bindingindex='" + bindingIndex + "']");
            if (bindingRow.length == 0) return;
            
            if (confirm("Are you sure you want to delete this binding?")) {
                bindingRow.fadeOut(200, function () { bindingRow.remove(); });
                makeBindingChanges();
                return true;
            }
            return false;
        }

        function openBindingsDialog(bindingIndex) {
            var row = $("[data-bindingindex=" + bindingIndex + "]");
            if (row.length == 0) return;
            $("#siteBindingDialog input.hosttxt").val(row.children("td:nth-child(1)").attr("data-val"));
            $("#siteBindingDialog input.porttxt").val(row.children("td:nth-child(2)").attr("data-val"));
            var cert = row.children("td:nth-child(3)").attr("data-val");
            if (cert != "") {
                $("#siteBindingDialog input.certtxt").val(cert);
                $("#siteBindingDialog #isHttpsBinding").prop("checked", true);
                $("#certificateThumbprint").show();
            }
            else {
                $("#siteBindingDialog input.certtxt").val("");
                $("#siteBindingDialog #isHttpsBinding").prop("checked", false);
                $("#certificateThumbprint").hide();
            }

            $("#siteBindingDialogDeleteButton").show();
            $("#siteBindingDialogSaveButton").val("OK");

            selectedBindingIndex = bindingIndex;
            showDialog($("#siteBindingDialog"), function () { $("#siteBindingDialog input.hosttxt").focus(); });
        }

        function openNewBindingsDialog() {
            $("#siteBindingDialog input.hosttxt").val("");
            $("#siteBindingDialog input.porttxt").val("80");
            $("#siteBindingDialog input.certtxt").val("");
            $("#siteBindingDialog #isHttpsBinding").prop("checked", false);
            $("#certificateThumbprint").hide();
            $("#siteBindingDialogDeleteButton").hide();
            $("#siteBindingDialogSaveButton").val("Add");
            selectedBindingIndex = null;
            showDialog($("#siteBindingDialog"), function () { $("#siteBindingDialog input.hosttxt").focus(); });
        }

        function applyBinding() {
            if (selectedBindingIndex == null) {
                for (var i = 0; i < 1000; i++) {
                    if ($("[data-bindingindex=" + i + "]").length == 0) {
                        selectedBindingIndex = i;
                        break;
                    }
                }
                var newRow = $("\
                        <tr data-bindingindex='" + selectedBindingIndex + "' onclick='openBindingsDialog(" + selectedBindingIndex + ");'>\
                            <td data-val=''></td>\
                            <td data-val=''></td>\
                            <td data-val=''></td>\
                        </tr>");
                newRow.hover(function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); });
                $(".sitedetails .bindingstable tbody").append(newRow);
            }

            var row = $("[data-bindingindex=" + selectedBindingIndex + "]");
            if (row.length == 0) return;
            var hostCell = row.children("td:nth-child(1)");
            var portCell = row.children("td:nth-child(2)");
            var certCell = row.children("td:nth-child(3)");

            var newHost = $("#siteBindingDialog input.hosttxt").val();
            if (newHost != hostCell.attr("data-val")) {
                hostCell.attr("data-val", newHost);

                if (newHost == "") newHost = "Any";
                hostCell.html(newHost);
                makeBindingChanges();
            }

            
            var newPort = $("#siteBindingDialog input.porttxt").val();
            if (newPort != portCell.attr("data-val")) {
                portCell.attr("data-val", newPort);
                portCell.html(newPort);
                makeBindingChanges();
            }

            var newCert = $("#siteBindingDialog input.certtxt").val();
            if (!$("#isHttpsBinding").is(":checked")) newCert = "";
            if (newCert != certCell.attr("data-val")) {
                certCell.attr("data-val", newCert);
                if (newCert != "") newCert = "<i class='icon-lock icon-green'></i> " + newCert;
                certCell.html(newCert);
                makeBindingChanges();
            }

            selectedBindingIndex = null;
            hideDialog();
        }

        function openSiteDetails(row) {
            var siteId = $(row).attr("data-site-id");
            var siteName = $(row).attr("data-site-name");
            var siteSource = $(row).attr("data-site-source");
            var siteUrl = $(row).attr("data-site-url");

            if (!dashboardSuspended) toggleSuspendDashboard();
            selectedSiteId = siteId;
            changeTab(1);
            $(".content.sitedetails").attr("data-navtitle", siteName);
            $(".sitedetails .generaldetails table tr:nth-child(1) td:nth-child(2)").html(siteId);
            $(".sitedetails .generaldetails table tr:nth-child(2) td:nth-child(2)").html(siteName);
            $(".sitedetails .generaldetails table tr:nth-child(3) td:nth-child(2)").html(siteSource);
            if (siteUrl != "") $(".sitedetails .generaldetails table tr:nth-child(4) td:nth-child(2)").html("<a href='" + siteUrl + "' target='_blank'>" + siteUrl + "</a>");
            else $(".sitedetails .generaldetails table tr:nth-child(4) td:nth-child(2)").html("");

            refreshThumbnail();
            view.show($(".content.sitedetails"));
        }

        function refreshThumbnail() {
            if ($(".tab.general table tr:nth-child(4) td:nth-child(2)").html() == "") {
                $(".sitedetails .general .sitethumbcontainer .thumbnourl").fadeIn();
                return;
            }
            $(".sitedetails .general .sitethumbcontainer .thumbnourl").hide();
            $(".sitedetails .sitethumbcontainer .thumbloader").fadeIn();
            $(".sitedetails .sitethumbcontainer .thumb").attr("src", "/services/sitethumb.ashx?siteid=" + selectedSiteId);
        }

        function toggleHttps() {
            if ($("#isHttpsBinding").is(":checked")) $("#certificateThumbprint").fadeIn();
            else $("#certificateThumbprint").fadeOut();
        }


        function showEditSiteDialog() {
            var siteId = $(".sitedetails .generaldetails table tr:nth-child(1) td:nth-child(2)").html();
            var siteName= $(".sitedetails .generaldetails table tr:nth-child(2) td:nth-child(2)").html();
            var siteSource = $(".sitedetails .generaldetails table tr:nth-child(3) td:nth-child(2)").html();
            var siteUrl = $(".sitedetails .generaldetails table tr:nth-child(4) td:nth-child(2) a").attr("href");
            $("#editSiteDialog .siteId").val(siteId);
            $("#editSiteDialog .siteName").val(siteName);
            $("#editSiteDialog .siteSource").val(siteSource);
            $("#editSiteDialog .siteUrl").val(siteUrl);
            showDialog($('#editSiteDialog'));
        }
        function saveEditSiteChanges() {
            var newSiteId = $("#editSiteDialog .siteId").val();
            var newSiteName = $("#editSiteDialog .siteName").val();
            var newSiteUrl = $("#editSiteDialog .siteUrl").val();

            $(".sitedetails .generaldetails table tr:nth-child(2) td:nth-child(2)").html(newSiteName);
            $(".sitedetails .generaldetails table tr:nth-child(4) td:nth-child(2) a").html("<a href='" + newSiteUrl + "' target='_blank'>" + newSiteUrl + "</a>");
            $(".content.sitedetails").attr("data-navtitle", newSiteName);
            $(".navigation .breadcrumb li.active").html(newSiteName);

            hideDialog();


            var postData = {
                siteId: newSiteId,
                siteName: newSiteName,
                siteUrl: newSiteUrl
            };

            $.ajax({
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify(postData),
                url: 'Services/InstanceControl.svc/SaveSiteDetails'
            })
            .fail(function (xhr, status, error) {
                stopError("Can't save site details!");
            })
            .done(function (data, status, xhr) {
                if (!data.d) return;
                if (data.d.Error != null) stopError(data.d.Error);
                refreshThumbnail();
            });

        }

        $(document).ready(function () {
            $(".sitedetails .sitethumbcontainer .thumb").load(function () {
                $(".sitedetails .sitethumbcontainer .thumbloader").fadeOut();
            });
        });
    </script>
    <div>
        <div class="verttabspace">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#" onclick="changeTab(1)"><i class="icon-chevron-right"></i> General</a></li>
                <li><a href="#" onclick="changeTab(2)"><i class="icon-chevron-right"></i> Bindings</a></li>
                <li><a href="#" onclick="changeTab(3)"><i class="icon-chevron-right"></i> Virtual Paths</a></li>
            </ul>
        </div>
        <div class="verttabcontent">
            <div class="tab general" style="display:block">

                <div>
                    <div class="sitethumbcontainer"><img class="thumb" width="300" height="300" />
                        <div class="thumbloader"><span><img src="img/loader.gif" /><br />loading...</span></div>
                        <div class="thumbnourl">Site has no url</div>
                        <span class="btn btn-info btn-mini refreshme" onclick="refreshThumbnail()">Refresh</span>
                    </div>
                    <div class="generaldetails"><h1 style="width:100%">Site details</h1>
                        <div style="float:right; text-align:right; margin-right:-19px">
                            <div class="buttonarea">
                                <button style="width:75px" class="btn btn-mini btn-success" type="button" onclick="showEditSiteDialog()"><i class="icon-edit icon-white"></i> Edit</button>
                                <button style="width:125px" class="btn btn-mini btn-success" type="button" onclick="showDialog($('#editSiteDialog'));"><i class="icon-tasks icon-white"></i> Change Source</button>
                            </div>
                        </div>
                        <table class="table-bordered">
                            <tr><td width="20%">Site ID</td><td></td></tr>
                            <tr><td>Name</td><td></td></tr>
                            <tr><td>Source</td><td></td></tr>
                            <tr><td>Url</td><td></td></tr>
                        </table>
                    </div>
                </div>



            </div>
            <div class="tab bindings">
                <div id="bindingsLoader"><div><img src="img/loader.gif" /><br />loading...</div></div>
                
                <div class="buttonarea">
                    <input type="checkbox" checked="checked" class="checkbox" id="autoApplyBindingChangesCheckbox" style="margin:0px;" /> <label for="autoApplyBindingChangesCheckbox" style="display:inline; font-size:10px; padding-right:20px ">Push changes to instances</label>
                    <button class="btn btn-success" id="addbindingbutton" onclick="openNewBindingsDialog()"><i class="icon-plus-sign icon-white"></i> Add</button> 
                    <button class="btn btn-danger disabled" id="savebindingsbutton" disabled="disabled" onclick="saveSiteBindings()"><i class="icon-ok-sign icon-white"></i> Save</button>
                </div>
                <table cellpadding="0" cellspacing="0" class="bindingstable table table-bordered table-striped">
                    <thead>
                        <tr><td>Host</td><td>Port</td><td>SSL</td></tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="tab vpaths">
                This section is under construction!
            </div>
        </div>
    </div>
</div>